<script language="javascript">
    // apply filters
    jQuery(document).ready(function(){
        jQuery("#list_etapas").jqGrid({
            url: '<?php echo site_url() ?>/trancrearcompania/procesos_data',
            mtype: 'POST',
            datatype: 'json',
            colNames:['ID','Etapa', 'Estatus', 'Descripcion','Fecha', 'Ultima T.','Usuario'],
            colModel :[
                {name:'IdProceso', index:'IdProceso', width:5,hidden:true},
                {name:'IdEtapa', index:'IdEtapa',width:5},
                {name:'IdEstatus', index:'IdEstatus',width:5},
				{name:'DescripcionProceso', index:'DescripcionProceso',width:12},
				{name:'FechaProceso', index:'FechaProceso', width:6},
				{name:'Dias', index:'dias', width:4},
				{name:'Comentario', index:'IdUsuario', width:10}
				],
            pager: jQuery('#pager_etapas'),
            hiddengrid: false,
            sortname: 'IdProceso',
            rowNum:10,
            rowList:[10,20,30,40,50],
            sortorder: "desc",
            height: '100%',
            width: '600',
            imgpath: _base_url + 'public/css/jqgrid/flex/images',
            viewrecords: true,
            multiselect: false,
            editurl:"http://company24h.com/company24h/index.php/etapastrx/save",
            adjacents: 4,
			onSelectRow: function(ids) 
			{
				
            	if(ids != null) 
            	{
            		var rec = jQuery("#list_etapas").getRowData(ids);
            		
            		
            	}
            },
			afterInsertRow: function(rowid, aData){
                                 switch (aData.activa) {
                                     case '1': jQuery("#list_etapas").setCell(rowid,'activa','<img src="' + _base_url + 'public/images/accept.png" />',{color:'green'});
                                         break;
                                     case '0': jQuery("#list_etapas").setCell(rowid,'activa','<img src="' + _base_url + 'public/images/close.png" />',{color:'#ccc'});
                                         break;
								}
								 
								 switch (aData.completada) {
                                     case '1': jQuery("#list_etapas").setCell(rowid,'completada','<img src="' + _base_url + 'public/images/accept.png" />',{color:'green'});
                                         break;
                                     case '0': jQuery("#list_etapas").setCell(rowid,'completada','<img src="' + _base_url + 'public/images/close.png" />',{color:'#ccc'});
                                         break;
                                 }},
            jsonReader: { repeatitems : false, IdProceso: "0" }
        }).navGrid('#pager_etapas', {add:false,edit:false,del:false,search:false}, //options 
        {height:280,reloadAfterSubmit:true}, // edit options 
        {height:280,reloadAfterSubmit:false}, // add options 
        {reloadAfterSubmit:false}, // del options 
        {} // search options 
        )
    

     
        
 
        
        .navButtonAdd('#pager_etapas',{caption:"Detalles", buttonimg: _base_url + "public/images/edit.png", onClickButton:function()
        {
        id=jQuery('#list_etapas').getGridParam('selrow');
        	
        if (id) 
        {
            if(id.length == 1){
            	
                var ret = jQuery("#list_etapas").getRowData(id);
                if(ret.IdProceso!='')
                {
                	window.location = _site_url + '/etapastrx/det/' + ret.IdProceso;
                }
                else
                {
                	jAlert('La transaccion iniciada no puede ser editada');
                }
            } else { jAlert('Seleccione solo una transaccion'); }
        } else { jAlert('Debe seleccionar al menos una transaccion'); }
        return false; } 
        }) 
        
        
        
   
      ;
    }); 
</script>
<div class="table_container">
<table>
<tr><td><div id="titulo">Seguimiento de Transacciones<hr /></div><br /></td></tr>
<tr>
<td>
    <table id="list_etapas" class="scroll"></table>
    <div id="pager_etapas" class="scroll" style="text-align:center;"></div>
</td>
 </tr>
 </table>
</div>